<template>
    <view class="globe_back">
        <view v-if="status == -1 || status == 1">
            <view style="height: 16px"></view>
            <view class="back_fff br_16 p_32 m_16">
                <!-- 姓名 -->
                <view class="flex">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">姓名</text>
                    </view>
                    <view class="flex_1 line_F7FAFF from-title-box">
                        <input
                            class="f_28 cl_00091A pb_16"
                            v-model="formData.name"
                            placeholder-class="cl_CCCED1"
                            cursor-spacing="100px"
                            type="text"
                            value=""
                            placeholder="请填写您的真实姓名"
                        />
                    </view>
                </view>
                <!-- 联系电话 -->
                <view class="flex mt_24">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">联系电话</text>
                    </view>
                    <view class="flex_1 line_F7FAFF from-title-box">
                        <input
                            class="f_28 cl_00091A pb_16"
                            v-model="formData.mobile"
                            placeholder-class="cl_CCCED1"
                            cursor-spacing="100px"
                            type="number"
                            value=""
                            placeholder="请填写您的联系电话"
                        />
                    </view>
                </view>
                <!-- 身份证号码 -->
                <view class="flex mt_24">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">身份证号</text>
                    </view>
                    <view class="flex_1 line_F7FAFF from-title-box">
                        <input
                            class="f_28 cl_00091A pb_16"
                            v-model="formData.idcard_no"
                            placeholder-class="cl_CCCED1"
                            cursor-spacing="100px"
                            type="number"
                            value=""
                            placeholder="请填写您的身份证号"
                        />
                    </view>
                </view>
            </view>
            <!-- 拥有技能 -->
            <view class="back_fff br_16 p_32 m_16 mt_32">
                <view class="flex">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">拥有技能</text>
                    </view>
                </view>
                <view class="mt_16">
                    <view class="skill">
                        <view class="skillBox">
                            <u-checkbox-group :disabled="$lz.inArray(status, [0, 1])" v-model="formData.services" placement="row" @change="checkboxChange">
                                <u-checkbox
                                    :checked="$lz.inArray(item.id, formData.services)"
                                    :disabled="$lz.inArray(status, [0, 1])"
                                    :customStyle="{ marginBottom: '8px', width: '33%' }"
                                    v-for="(item, index) in skill_list"
                                    :key="index"
                                    :label="item.name"
                                    :name="item.id"
                                ></u-checkbox>
                            </u-checkbox-group>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 身份证 -->
            <view class="back_fff br_16 p_32 m_16 mt_32">
                <view class="from-title-box title">
                    <text class="f_28 cl_333A47">身份证</text>
                </view>
            	<view class="br_24 mt_16"  style="background: #f7faff; padding: 32rpx 56rpx">
            	    <u-upload
            	    	:fileList="fileList8"
            	    	@afterRead="afterRead"
            	    	@delete="deletePic"
            	    	name="8"
            	    	multiple
            	    	:maxCount="1"
            	    	width="250"
            	    	height="150"
            	    >
            		   <image class="img_526" :src="url+'imgs/sfz1.png'" mode="widthFix"></image>
            	    	<!-- <image class="img_526" :src="urls+ 'sfz1.png'" mode=""></image> -->
            	    </u-upload>
            		
            		
            	</view>
            	<view class="br_24 mt_16"  style="background: #f7faff; padding: 32rpx 56rpx">
            	    <u-upload
            	    	:fileList="fileList9"
            	    	@afterRead="afterRead"
            	    	@delete="deletePic"
            	    	name="9"
            	    	multiple
            	    	:maxCount="1"
            	    	width="250"
            	    	height="150"
            	    >
            		   <image class="img_526" :src="url+'imgs/sfz2.png'" mode="widthFix"></image>
            	    	<!-- <image class="img_526" :src="urls+ 'sfz1.png'" mode=""></image> -->
            	    </u-upload>
            	
            	</view>
				<view class="cl_3377FF m_16 f_24">为了您的权益，请您如实认真填写上述相关信息！</view>
				<view class="addBtn back_3377FF br_24 cl_fff mt_24" @click="submit">提交资料</view>
				<view style="height: 20px"></view>
            </view>
        </view>
        <view v-if="status == 0" >
            <image class="typeImg" :src="url+'imgs/tjshz.png'" mode="widthFix"></image>
            <text class="typeText cl_999CA3 f_28" >已提交，请前往机构培训</text>
        </view>
        <view v-if="status == 2">
            <image class="typeImg" :src="url+'imgs/tjshsb.png'" mode="widthFix"></image>
            <text class="typeText cl_999CA3 f_28">资料审核失败，请重新填写</text>
        </view>
		<view style="width: 100%;padding-top: 50rpx;" v-if="status == 0" @click="traininglocation_to()">
           <view class="anniu" >点击查看机构列表</view>
		</view>
    </view>
</template>

<script>
import { upload, merchantApply, merchantService, merchantApplyInfo, merchantApplyUpdate } from '@/api';

export default {
    data() {
        return {
            show: false,
            status: -1,
            formData: {
                name: '',
                mobile: '',
                type: 2,
                latitude: '',
                longitude: '',
                full_address: '',
                front_idcard: '',
                back_idcard: '',
                idcard_no: '',
                services: []
            },
            serviceList: [],
			url:'',
			skill_list:[],
			fileList8:[],
			fileList9:[],
			image8:[],
			image9:[],
			enter_index:'',
        };
    },
    onLoad() {
        // merchantService().then((res) => {
        //     if (res.code == 200) {
        //         const items = res.data.map((item) => {
        //             if (item.id == this.formData.category) {
        //                 this.typeName = item.meta.title;
        //             }
        //             return {
        //                 id: item.id,
        //                 title: item.meta.title
        //             };
        //         });
        //         this.serviceList = items;
        //     }
        // });
		this.$.ajax(1,"POST","ordertaker/ordertaker/skill_list",{},(res)=>{
		  if(res.code==200){
					 this.skill_list=res.data

				 // console.log(this.enter_index,'this.enter_indexthis.enter_indexthis.enter_index')
		  }else{
			   this.$.ti_shi(res.msg);
		  }
		})
		
		this.url = this.$.ajax_url2;
		
		this.$.ajax(1,"POST","index/q_enter_index",{},(res)=>{
		  if(res.code==200){
			   
				 if(res.data){
					 this.enter_index=res.data
					 this.status=res.data.status
				 }
				 // console.log(this.enter_index,'this.enter_indexthis.enter_indexthis.enter_index')
		  }else{
			   this.$.ti_shi(res.msg);
		  }
		})
    },
    onShow() {

    },
    methods: {
		traininglocation_to(){
			uni.navigateTo({
			    url: '/pages/index/traininglocation'
			});
		},
        confirm(e) {
            console.log(e.value[0]);
            this.formData.type = e.value[0];
            this.show = false;
        },
        cancel() {
            this.show = false;
        },

        submit() {
			if(!this.formData.name){
				this.$.ti_shi('请填写真实姓名');
				return;
			}
			if(!this.formData.mobile){
				this.$.ti_shi('请填写联系电话');
				return;
			}
			if(!this.formData.idcard_no){
				this.$.ti_shi('请填写身份证号');
				return;
			}
			if(!this.formData.services.join(',')){
				this.$.ti_shi('请选择拥有技能');
				return;
			}
			if(!this.image8.join(',')){
				this.$.ti_shi('请上传身份证正面');
				return;
			}
			if(!this.image9.join(',')){
				this.$.ti_shi('请上传身份证反面');
				return;
			}
			let data={
					 // goods_id:this.id,
					 name:this.formData.name,
					 phone:this.formData.mobile,
					 id_card:this.formData.idcard_no,
					 skill_ids:this.formData.services.join(','),
					 id_card_front_image:this.image8.join(','),
					 id_card_back_image:this.image9.join(','),
			   }   
							// console.log(data);return;	
				this.$.ajax(1,"POST","index/q_enter",data,(res)=>{
				  if(res.code==200){
					   this.$.ti_shi(res.msg);
					   setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					}, 1000);
				  }else{
					 this.$.ti_shi(res.msg);
				  }
				})
			// console.log(this.formData);return;
            // merchantApply({ ...this.formData, type: 2 }).then((res) => {
            //     console.log(res);
            // });
        },
        report_map() {
            uni.chooseLocation({
                success: (res) => {
                    this.formData.latitude = res.latitude;
                    this.formData.longitude = res.longitude;
                    this.formData.full_address = `${res.address}-${res.name}`;
                }
            });
        },
        checkboxChange(args) {
            this.formData.services = args;
        },
		// 删除图片
		deletePic(event) {
			if(event.name==8){
				this.image8.splice(event.index, 1)
			}
			if(event.name==9){
				this.image9.splice(event.index, 1)
			}
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url,event.name)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url,event_name) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$.ajax_url+'common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						if(event_name==8){
							this.image8.push(JSON.parse(res.data).data.url)
						}
						if(event_name==9){
							this.image9.push(JSON.parse(res.data).data.url)
						}
						console.log(res,event_name)
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
    }
};
</script>

<style scoped lang="scss">
/deep/.u-checkbox-group {
    flex-wrap: wrap !important;
}
.anniu{
	background-color: #3377ff;
	color: #fff;
	height: 100rpx;
	line-height: 100rpx;
	width: 50%;
	text-align: center;
	margin: 0 auto;
}
.m_16 {
    margin: 0 16px 16px 16px;
}
.title {
    width: 30%;
}
.Input {
    width: 70%;
}
.addBtn {
    width: 686rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 24px auto;
}
.typeImg {
    width: 400rpx;
    height: 320rpx;
    margin: 50% auto 20px;
    display: block;
}

.typeText {
    text-align: center;
    margin: 0 auto;
    display: block;
}
</style>
